<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap"></div>
    <script>
        //对象
        // const obj = { name: '小明', age: 18 }
        // const wrap = document.getElementById('wrap')
        // wrap.textContent = obj.name
        //代码开始的地方
        // wrap.textContent = obj.name
        // obj.name = '123'
        // wrap.textContent = obj.name
        // obj.name = '456'
        // wrap.textContent = obj.name
        // obj.name = '789'
        // wrap.textContent = obj.name
        //....

        //Proxy : 对象代理 监控数据属性的变化， new Proxy是一个构造函数 ==> class
        // const p = new Proxy(obj, {
        //     get(target, property, receiver) {//日志的记录信息
        //         console.log('有人访问了name属性');
        //         // return obj[property]
        //         return "哈哈哈，你想访问我里面的属性，你在想屁吃"
        //     },
        //     set(target, property, value, receiver) {
        //         // console.log('有人设置name属性');
        //         obj[property] = value
        //         wrap.textContent = obj.name
        //     }
        // })
        // p.name = '123'
        // p.name = '456'
        // p.name = '789'
        // p.name = '101112'
        // console.log(p.name);
    </script>
</body>

</html>